import { ScrollView, View } from "@tarojs/components";
import { useState, useEffect } from "react";
import classNames from "classnames";
import "./index.scss";

function XzTabs(props: any) {
  const [tabIndex, setTabIndex]: any = useState(1);
  console.log(props);
  useEffect(() => {
    props.onChange(tabIndex);
  });
  return (
    <ScrollView className="tabs" scrollX>
      {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => {
        return (
          <View
            className={classNames("tab-item", {
              "tab-item-active": tabIndex === item,
            })}
            onClick={() => setTabIndex(item)}
          >
            标签{item}
          </View>
        );
      })}
    </ScrollView>
  );
}

export default XzTabs;
